const { ResolvePlugin } = require("webpack");

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
  // 打包入口
  entry:'./src/index.js',
  // 输出地址
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build'),
    publicPath:'./'
  },
  // 处理资源配置
  module:{
    rules:[
      // 处理less 
      {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      },
      // 处理css
      {
        test:/\.css$/,
        use:['css-loader','less-loader']
      },
      // 处理图片 
      {
        test:/\.(jpeg|png|jpg|gif)$/,
        loader:'url-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'imgs'
        },
      },
       // 处理img 标签的图片
       {
        test:/\.html$/,
        loader:'html-loader'
      },
      // 字体其他资源
      {
        exculde:/\.(less|css|jpeg|png|jpg|gif|html)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'media'
        },
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      tempalte:'./src/index.html'
    })
  ],
  mode:'development',
  devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:3000,
    open:true
  },

}